import React, { useRef } from 'react';
import { Resizable } from "re-resizable";
import getCssPrefix from '../../../lib/getCssPrefix';
import setResizeDirection from '../../../lib/setResizeDirection';
const { cssPrefix } = getCssPrefix();
const directions = setResizeDirection({ right: true });
function HeaderCell(props) {
    const { modifyColumns, column, type } = props;
    const ref = useRef(null)
    const onResize = (e, direction, ref) => {
        modifyColumns({ operate: 'change', column: { key: column.key, width: ref.offsetWidth } })
    }
    return (
        <Resizable enable={directions} onResize={onResize} className={`${cssPrefix}-header-cell_wrapper ${type}`}>
            <div
                ref={ref}
                className={`${cssPrefix}-header-cell`}
                style={{ width: column.width }}
            >
                <div className={`${cssPrefix}-header_content`}>
                    {props.children}
                </div>
                <div className={`${cssPrefix}-header_tooltips`}>
                    {column.filter ?
                        <div className={`${cssPrefix}-header_tooltips-child`}>
                            <svg className={`${cssPrefix}-cell_tool-icon gjd-filter`} aria-hidden="true">
                                <use xlinkHref="#icon-gjdhopper-o"></use>
                            </svg>
                        </div> : null}
                </div>
            </div>
        </Resizable>
    )
}
export default HeaderCell;